<!doctype html>
<html lang="zh">

<head>
  <title>Tooltip</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }

    mdui-button {
      display: inline-block;
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/tooltip.js';
    import '../../packages/mdui/components/button.js';
    import '../../packages/mdui/components/avatar.js';
    import { $ } from '../../packages/jq/index.js';

    $(() => {
      const $tooltip = $('.manual-tooltip')
      $('#manual-open').on('click', () => {
        $tooltip.each((_, tooltip) => {
          tooltip.open = true;
        });
      });
      $('#manual-close').on('click', () => {
        $tooltip.each((_, tooltip) => {
          tooltip.open = false;
        });
      });
    });
  </script>
</head>

<body>
  <main>
    <section>
      <h2>theme</h2>
      <mdui-tooltip content="Save to favorites">
        <mdui-button variant="elevated">plain</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip>
        <mdui-button variant="elevated">plain</mdui-button>
        <span slot="content">Grant value is calculated using the closing stock price from the day before the grant date. Amounts do not reflect tax witholdings.</span>
      </mdui-tooltip>
      <mdui-tooltip
        variant="rich"
        headline="Rich tooltip"
        content="Rich tooltips bring attention to a particular element of feature thar warrants the user`s focus"
      >
        <mdui-button variant="elevated">rich</mdui-button>
        <mdui-button variant="text" slot="action">Action</mdui-button>
        <mdui-button variant="text" slot="action">Action</mdui-button>
      </mdui-tooltip>

      <div class="mdui-theme-dark" style="padding: 40px 0">
        <mdui-tooltip content="Save to favorites">
          <mdui-button variant="elevated">plain</mdui-button>
        </mdui-tooltip>
        <mdui-tooltip>
          <mdui-button variant="elevated">plain</mdui-button>
          <span slot="content">Grant value is calculated using the closing stock price from the day before the grant date. Amounts do not reflect tax witholdings.</span>
        </mdui-tooltip>
        <mdui-tooltip
          variant="rich"
          headline="Rich tooltip"
          content="Rich tooltips bring attention to a particular element of feature thar warrants the user`s focus"
        >
          <mdui-button variant="elevated">rich</mdui-button>
          <mdui-button variant="text" slot="action">Action</mdui-button>
          <mdui-button variant="text" slot="action">Action</mdui-button>
        </mdui-tooltip>
      </div>
    </section>

    <section>
      <h2>Trigger</h2>
      <mdui-tooltip trigger="click" content="click">
        <mdui-button variant="elevated">Click</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="hover" content="hover">
        <mdui-button variant="elevated">Hover</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="focus" content="focus">
        <mdui-button variant="elevated">Focus</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="click hover" content="click hover">
        <mdui-button variant="elevated">Click Hover</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="click focus" content="click focus">
        <mdui-button variant="elevated">Click Focus</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="click hover focus" content="click hover focus">
        <mdui-button variant="elevated">Click Hover Focus</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip trigger="manual" content="manual" class="manual-tooltip">
        <mdui-button variant="elevated">Manual</mdui-button>
      </mdui-tooltip>
      <br/>

      <mdui-button variant="elevated" id="manual-open">open</mdui-button>
      <mdui-button variant="elevated" id="manual-close">close</mdui-button>
    </section>

    <section style="padding-left: 200px">
      <h2>placement</h2>
      <mdui-tooltip placement="auto" content="auto">
        <mdui-button variant="elevated">plain auto</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip
        variant="rich"
        headline="Rich tooltip"
        content="Rich tooltips bring attention to a particular element of feature thar warrants the user`s focus"
      >
        <mdui-button variant="elevated">rich auto</mdui-button>
        <mdui-button variant="text" slot="action">Action</mdui-button>
        <mdui-button variant="text" slot="action">Action</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="top-left" content="top-left">
        <mdui-button variant="elevated" style="margin-left: -100px">top-left</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="top-right" content="top-right">
        <mdui-button variant="elevated" style="margin-left: 300px">top-right</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="top-start" content="top-start">
        <mdui-button variant="elevated">top-start</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="top" content="top">
        <mdui-button variant="elevated">top</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="top-end" content="top-end">
        <mdui-button variant="elevated">top-end</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="bottom-start" content="bottom-start">
        <mdui-button variant="elevated">bottom-start</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="bottom" content="bottom">
        <mdui-button variant="elevated">bottom</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="bottom-end" content="bottom-end">
        <mdui-button variant="elevated">bottom-end</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="left-start" content="left-start">
        <mdui-button variant="elevated">left-start</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="left" content="left">
        <mdui-button variant="elevated">left</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="left-end" content="left-end">
        <mdui-button variant="elevated">left-end</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="right-start" content="right-start">
        <mdui-button variant="elevated">right-start</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="right" content="right">
        <mdui-button variant="elevated">right</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="right-end" content="right-end">
        <mdui-button variant="elevated">right-end</mdui-button>
      </mdui-tooltip>
      <br/>
      <mdui-tooltip placement="bottom-left" content="bottom-left">
        <mdui-button variant="elevated" style="margin-left: -100px">bottom-left</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip placement="bottom-right" content="bottom-right">
        <mdui-button variant="elevated" style="margin-left: 300px">bottom-right</mdui-button>
      </mdui-tooltip>
    </section>

    <section>
      <h2>delay</h2>
      <mdui-tooltip content="open-delay 1000" open-delay="1000">
        <mdui-button variant="elevated">open-delay 1000</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip content="close-delay 1000" close-delay="1000">
        <mdui-button variant="elevated">close-delay 1000</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip content="open-delay 1000, close-delay 1000" open-delay="1000" close-delay="1000">
        <mdui-button variant="elevated">open-delay 1000, close-delay 1000</mdui-button>
      </mdui-tooltip>
    </section>

    <section>
      <h2>disabled</h2>
      <mdui-tooltip disabled content="disabled">
        <mdui-button variant="elevated">disabled</mdui-button>
      </mdui-tooltip>
    </section>

    <section>
      <h2>content slot</h2>
      <mdui-tooltip>
        <div slot="content">
          <mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar> Avatar
        </div>
        <mdui-button variant="elevated">avatar slot</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip>
        <div slot="content"><span style="color: red">red</span> default</div>
        <mdui-button variant="elevated">color</mdui-button>
      </mdui-tooltip>
    </section>

    <section>
      <h2>z-index</h2>
      <mdui-tooltip content="default">
        <mdui-button variant="elevated">default</mdui-button>
      </mdui-tooltip>
      <mdui-tooltip content="z-index: 2000" z-index="2000">
        <mdui-button variant="elevated">z-index: 2000</mdui-button>
      </mdui-tooltip>
    </section>

    <section>
      <h2>default open</h2>
      <mdui-tooltip content="default open" open>
        <mdui-button variant="elevated">default open</mdui-button>
      </mdui-tooltip>
    </section>
  </main>
</body>

</html>
